<template>
  <hero-section />
  <featured-section />
  <categories-section />
  <recommend-section />

  <promotion-section />

  <user-reviews />
  <about-section />
</template>

<script lang="ts" setup>
  import { nextTick, onMounted } from 'vue';
  import UserReviews from '@/components/UserReviews.vue';
  import HeroSection from '@/components/HeroSection.vue';
  import FeaturedSection from '@/components/FeaturedSection.vue';
  import CategoriesSection from '@/components/CategoriesSection.vue';
  import RecommendSection from '@/components/RecommendContent.vue';
  import AboutSection from '@/components/AboutContent.vue';
  import PromotionSection from '@/components/Promotional.vue';

  onMounted(() => {
    nextTick(() => {
      // 导航栏滚动效果
      const navbar = document.getElementById('navbar');
      window.addEventListener('scroll', () => {
        if (window.scrollY > 100) {
          navbar.classList.add('shadow-md');
        } else {
          navbar.classList.remove('shadow-md');
        }
      });

      // 热门推荐滑块
      const slider = document.getElementById('featuredSlider');
      const prevBtn = document.getElementById('prevSlide');
      const nextBtn = document.getElementById('nextSlide');

      prevBtn.addEventListener('click', () => {
        slider.scrollBy({ left: -300, behavior: 'smooth' });
      });

      nextBtn.addEventListener('click', () => {
        slider.scrollBy({ left: 300, behavior: 'smooth' });
      });

      // 倒计时功能
      function updateCountdown() {
        const endDate = new Date('2025-07-20T23:59:59').getTime();
        const now = new Date().getTime();
        const distance = endDate - now;

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById('days').innerText = days
          .toString()
          .padStart(2, '0');
        document.getElementById('hours').innerText = hours
          .toString()
          .padStart(2, '0');
        document.getElementById('minutes').innerText = minutes
          .toString()
          .padStart(2, '0');
        document.getElementById('seconds').innerText = seconds
          .toString()
          .padStart(2, '0');
      }

      // 初始化倒计时
      updateCountdown();
      setInterval(updateCountdown, 1000);

      //     // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();

          const targetId = this.getAttribute('href');
          if (targetId === '#') return;

          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: 'smooth',
            });

            // 关闭移动菜单
            // mobileMenu.classList.add('hidden');
          }
        });
      });
    });
  });
</script>

<style scoped>
  .music-app {
    background: #f9fafb;
    min-height: 100vh;
  }
</style>
